@import "../varibles";
@import "../mixins/mixin";

.vue-btn{
    display:inline-block;
    border-style: none;
    text-align: center;
    white-space: nowrap;
    @include  button-size(4px,10px,14px,32px,2px);

    &.small{
        font-size:12px;
        padding:0px 6px;
    }
    &.normal{
        padding:0px 10px;
    }

    &.large{
        font-size:16px;
        padding:6px 20px;
    }
    &.block{
        display: block;
        width:100%;
    }
}

.vue-btn-default{
	@include button-varint($brand-default-color,$brand-default,1px solid #e3e4e6);
}

.vue-btn-blue{
	 @include button-varint($brand-blue-color,$brand-blue,false);
}

.vue-btn-red{
	@include button-varint($brand-red-color,$brand-red,false);
}

.vue-btn-green{
	@include button-varint($brand-green-color,$brand-green,false);
}

.vue-btn-yellow{
	@include button-varint($brand-yellow-color,$brand-yellow,false);
}

.vue-btn-radius{
	border-radius:$border-radius-base;
}

.vue-btn-disabled,input:disabled,button:disabled{
     cursor: not-allowed;
	 background-color: $brand-disabled-color;
     color: $brand-disabled ;
     &:hover,&:focus{
     	 background-color: $brand-disabled-color ;
     }
}





